<template>
	<view class="author-home">
		<u-popup
			v-model="show"
			mode="center"
      :closeable="false"
      close-icon-color="#888"
			border-radius="16"
			@close="close"
			z-index="11"
			width="600">
			<view class="author-home-popup">
				<view class="title">{{ title }}</view>
				<view class="form-container">
					<u-form :model="albumForm" ref="uForm" label-width="150">
						<u-form-item label="专辑名称" prop="name" :border-bottom="false">
							<u-input v-model="albumForm.name" maxlength="10" border placeholder="请输入专辑名称" />
						</u-form-item>
            <u-form-item label="是否置顶" prop="is_top" :border-bottom="false">
							<u-switch v-model="albumForm.is_top" activeColor="#56d39d"></u-switch>
						</u-form-item>
					</u-form>
					<view class="btn-container">
						<u-button
              class="btn"
              plain
              hover-class="none"
              @click="show = false">取消</u-button>
						<u-button
							class="btn"
							type="primary"
							hover-class="none"
							:custom-style="{
								backgroundColor: '#56d39d'
							}"
							@click="sumbit"
							:loading="btnLoading">确认</u-button>
					</view>
				</view>
				<!-- 删除主页 -->
				<view v-if="albumForm.id" class="delete-home" @click="handleDeleteArtworlsAlbum">
					<text class="huiju-iconfont huiju-icon-shanchu"></text>
          <text class="bottom-view-button-text">删除专辑</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
  import { mapGetters } from 'vuex';
	import { createArtworksAlbum, updateArtworlsAlbum, deleteArtworlsAlbum } from '@/api/artworks';
  import { checkText } from '@/utils/index';
	export default{
		props: {
			popupShow: {
				type: Boolean,
				default: false,
			},
			popupTitle: {
				type: String,
				default: '创建新专辑',
			},
			albumInfo: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data(){
			return{
				show: this.popupShow,
				title: this.popupTitle,
				authorHomeInfoData: this.authorHomeInfo,
				btnLoading: false,
				albumForm: {
					id: '',
					name: '',
          is_top: false,
          author_id: '',
          artworks_type_id: '',
					artworks_cate_id: ''
				},
				rules: {
					name: [
            { 
              required: true, 
              message: '请输入主页昵称', 
              trigger: ['change', 'blur'],
            }
          ]
				}
			}
		},
    computed: {
			...mapGetters([
				'token',
			])
		},
		watch: {
			popupShow: {
				immediate: true,
				handler(val, oldValue) {
					this.show = val;
				}
			},
			popupTitle: {
				immediate: true,
				handler(val, oldValue) {
					this.title = val;
				}
			},
			albumInfo: {
				immediate: true,
        deep: true,
				handler(val, oldValue) {
          if (val.id) {
            this.albumForm.id = val.id;
          }
					this.albumForm.name = val.name;
          this.albumForm.author_id = val.author_id;
          this.albumForm.is_top = val.is_top === '1';
          this.albumForm.artworks_type_id = val.artworks_type_id;
          this.albumForm.artworks_cate_id = val.cate_id;
				}
			}
		},
		methods: {

			// 删除专辑
			handleDeleteArtworlsAlbum() {
				uni.showModal({
					title: '确认删除',
					content: `确定删除名称为“${this.albumForm.name}”的专辑么吗？删除专辑后素材将释放在作品中,是否删除？`,
					confirmText: '确定',
					cancelText: '取消',
					confirmColor: '#56d39d',
					success: ({ confirm, cancel }) => {
						if (confirm) {
							deleteArtworlsAlbum({
								id: this.albumForm.id
							}).then(result => {
								if (result && result.code === 200) {
									this.show = false;
									uni.showToast({
										title: '删除成功',
										icon: 'none',
									});
									this.$emit('success');
								} else {
									uni.showToast({
										title: '删除成功，请重试',
										icon: 'none',
									});
								}
							})
						}
					}
				})
			},

			// 确定提交
			sumbit() {
				this.$refs.uForm.validate(async valid => {
          if (valid) {

            // 检查文本内容
            const flag = await checkText(this.albumForm.name);

						// 编辑专辑
						if (this.albumForm.id) {
							this.updateArtworlsAlbumFn();
							return;
						}
						this.createArtworksAlbumFn();
          } else {
            console.log('验证失败');
          }
        });
			},

			// 修改
			updateArtworlsAlbumFn() {
				this.btnLoading = true;
				uni.showToast({
					title: '创建中...',
					icon: 'loading',
					mask: true,
				})
				const { id, name, is_top } = this.albumForm;
				updateArtworlsAlbum({ id, name, is_top }).then(result => {
					this.btnLoading = false;
					if (result && result.code === 200) {
						this.show = false;
						uni.showToast({
							title: '修改成功',
							icon: 'none',
						});
						this.$emit('success');
					} else {
						uni.showToast({
							title: '修改失败，请重试',
							icon: 'none',
						});
					}
				}).catch(() => {
					this.btnLoading = false;
				})
			},

			// 添加
			createArtworksAlbumFn() {

				if (this.albumForm.artworks_type_id == 9) {
					uni.showToast({
						title: '工具玩法不支持创建专辑',
						icon: 'none',
					})
					return;

				}
				this.btnLoading = true;
				uni.showToast({
					title: '创建中...',
					icon: 'loading',
					mask: true,
				})
				createArtworksAlbum(this.albumForm).then(result => {
					this.btnLoading = false;
					if (result && result.code === 200) {
						this.show = false;
						uni.showToast({
							title: '创建成功',
							icon: 'none',
						});
						this.$emit('success');
					} else {
						uni.showToast({
							title: '创建失败，请重试',
							icon: 'none',
						});
					}
				}).catch(() => {
					this.btnLoading = false;
				})
			},

			// 关闭
			close(){
				this.albumForm.name = '';
				this.albumForm.is_top = false;
				this.$emit('close', false);
			},
		},
		onReady() {
      this.$refs.uForm.setRules(this.rules);
    }
	}
</script>
<style lang="scss" scoped>
	.author-home-popup{
    position: relative;
		padding: 32rpx;

		.title{
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 32rpx;
		}

		.btn-container{
			display: flex;
			padding-top: 32rpx;
			justify-content: space-between;

			.btn{
				flex: 1;
			}
			.btn:nth-child(1){
				margin-right: 24rpx;
			}
		}

		.delete-home{
			position: absolute;
			width: 140rpx;
			height: 44rpx;
			line-height: 44rpx;
			right: 32rpx;
			top: 32rpx;
			color: $uni-color-primary2;
			font-size: 24rpx;
			text-align: right;
		}
	}
</style>
